
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Programming 3D Applications in HTML5 and WebGL &mdash; Three.js Cube with Lighting</title>
    
    <script src="../libs/jquery-1.9.1/jquery-1.9.1.js"></script>
    <script src="../libs/three.js.r58/three.js"></script>
    <script src="../libs/requestAnimationFrame/RequestAnimationFrame.js"></script>
    <script type="text/javascript">
    
        var renderer = null, 
        scene = null, 
        camera = null,
        cube = null;
        
        var duration = 5000; // ms
        var currentTime = Date.now();
        function animate() {
            
            var now = Date.now();
            var deltat = now - currentTime;
            currentTime = now;
            var fract = deltat / duration;
            var angle = Math.PI * 2 * fract;
            cube.rotation.y += angle;
        }
    
        function run() {
            requestAnimationFrame(function() { run(); });
            
                // Render the scene
                renderer.render( scene, camera );
    
                // Spin the cube for next frame
                animate();
                    
        }
        
        $(document).ready(
                function() {
    
                    var canvas = document.getElementById("webglcanvas");
    
                    // Create the Three.js renderer and attach it to our canvas
                    renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } );
    
                    // Set the viewport size
                    renderer.setSize(canvas.width, canvas.height);
    
                    // Create a new Three.js scene
                    scene = new THREE.Scene();
    
                    // Add  a camera so we can view the scene
                    camera = new THREE.PerspectiveCamera( 45, canvas.width / canvas.height, 1, 4000 );
                    scene.add(camera);
                    
                    // Add a directional light to show off the object
                    var light = new THREE.DirectionalLight( 0xffffff, 1.5);
    
                    // Position the light out from the scene, pointing at the origin
                    light.position.set(0, 0, 1);
                    scene.add( light );
    
                    // Create a shaded, texture-mapped cube and add it to the scene
                    // First, create the texture map
                    var mapUrl = "../images/webgl-logo-256.jpg";
                    var map = THREE.ImageUtils.loadTexture(mapUrl);
                    
                    // Now, create a Phong material to show shading; pass in the map
                    var material = new THREE.MeshPhongMaterial({ map: map,
                        color: 0xffffff });
    
                    // Create the cube geometry
                    var geometry = new THREE.CubeGeometry(2, 2, 2);
    
                    // And put the geometry and material together into a mesh
                    cube = new THREE.Mesh(geometry, material);
    
                    // Move the mesh back from the camera and tilt it toward the viewer
                    cube.position.z = -8;
                    cube.rotation.x = Math.PI / 5;
                    cube.rotation.y = Math.PI / 5;
    
                    // Finally, add the mesh to our scene
                    scene.add( cube );
    
                    // Run the run loop
                    run();
                }
        );
    
    </script>
    
    </head>
    <body>
    
        <canvas id="webglcanvas" style="border: none;background-color:#000000" width="500" height="500"></canvas>
    
    </body>
    
    </html>